<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="text" name="" id="" />
    <input type="button" name="" id="" value="发布" />

    <ul>
      <!-- <li>
        <h2></h2>
        <p></p>
        <img src="" alt="">
      </li> -->
    </ul>

    <script>
      /*   所有商品接口
            get
            参数
            pagesize  每页获取几个数据
            pagenum 获取第几页数据
            uid  用户id
            http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 */

      let pagesize = 10;
      let pagenum = 0;
      // 用户id
      let id = localStorage.getItem("id");
      let token = localStorage.getItem("token");
      laodList();
      // 封装加载商品列表的函数 --- 页面一开始需要 加载商品列表-- 发布了商品列表得更新 加载商品列表
      function laodList() {
        let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        axios
          .get(listAPI, {
            params: {
              pagesize,
              pagenum,
              uid: id,
            },
          })
          .then((r) => {
            console.log(r.data);
            //商品数组
            let productArr = r.data.data;
            // {pname:'aa',pprice:'111'}{}
            // console.log();

            // 根据商品数组- 拼接字符串 给ul
            let str = "";
            productArr.forEach((pObj) => {
              str += `<li>
                        <h2>${pObj.pname}</h2>
                        <p>${pObj.pprice}</p>
                        <p>${pObj.pid}</p>
                        <img src="${pObj.pimg}" alt="">
                        <button onclick="delProduct(${pObj.pid})">删除</button>
                        <a href="update.html?id=${pObj.pid}">修改</a>
                      </li>`;
            });

            document.querySelector("ul").innerHTML = str;
          });
      }

      /*
          添加商品 接口

      接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
           接口请求方式：get
           接口参数：
          1.
      pimg 2.
      pname 3.
      pprice 4.
      pdesc 5.
      uid （可选）用户商品

           使用方式  post 请求，参数在请求体

          */

      /*  */
      let ipts = document.querySelectorAll("input");
      ipts[4].onclick = function () {
        let pimg = ipts[0].value;
        let pname = ipts[1].value;
        let pprice = ipts[2].value;
        let pdesc = ipts[3].value;
        let addProductAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";
        axios
          .get(addProductAPI, {
            params: {
              pimg,
              pname,
              pprice,
              pdesc,
              uid: id,
            },
          })
          .then((r) => {
            console.log(r.data);
            // 发布成功加载商品列表
            laodList();
          });
      };

      // 删除函数

      /* 
      接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
         接口请求方式：get
         接口参数：

                pid（必选）商品的id
                uid（必选）用户的id
                 token（必选）登陆时候返回的token

                  使用方式
                 http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

      */
      async function delProduct(pid) {
        console.log(pid);
        // 准备删除接口参数
        let params = { pid, uid: id, token };
        console.log(params);
        let productDelteAPI =
          "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        let res = await axios.get(productDelteAPI, { params: params });
        console.log(res.data);
        //调用 加载列表
        laodList();
      }
    </script>
  </body>
</html>
